"use client"

import { Cover } from "@/app/(main)/_components/cover"
import dynamic from "next/dynamic";
import { useMemo } from "react";
import { Toolbar } from "@/app/(main)/_components/toolbar"
import { Skeleton } from "@/components/ui/skeleton"
import { api } from "@/convex/_generated/api"
import { Id } from "@/convex/_generated/dataModel"
import { useMutation, useQuery } from "convex/react"

interface CocumentIdPageProps {
    params: {
        documentId: Id<"documents">
    }
}


const DocumentIdPage = ({ params }: CocumentIdPageProps) => {
    // 动态导入编辑器
    const Editor = useMemo(() => dynamic(() => import("@/components/editor"), { ssr: false }), []);

    const document = useQuery(api.documents.getById, { documentId: params.documentId })

    const update = useMutation(api.documents.update)

    const onChange = (content: string) => {
        update({
            id: document?._id as Id<"documents">,
            content
        })
    }



    if (document === undefined) {
        return (<div>
            <Cover.Skeleton />
            <div className="md:max-w-3xl lg:max-w-4xl mx-auto mt-10">
                <div className="space-y-4 pl-8 pt-4">
                    <Skeleton className="h-14 w-[50%]" />
                    <Skeleton className="h-4 w-[80%]" />
                    <Skeleton className="h-4 w-[40%]" />
                    <Skeleton className="h-4 w-[60%]" />
                </div>
            </div>
        </div>)
    }
    if (document === null) {
        return <div>Document not found</div>
    }

    return (<div>
        <div className="md:max-w-3xl lg:md-max-w-4xl mx-auto">
            <Cover preview url={document.coverImage} />
            <div className="w-full">
                <Toolbar preview initialData={document} />
                <Editor
                    editable={false}
                    onChange={onChange}
                    initialContent={document.content}
                />
            </div>
        </div>
    </div>)
}


export default DocumentIdPage